$control-mobmdctrl: (
  text-color: getCssVar(color, text, 0),
  hover-bg-color: getCssVar(color, primary),
  active-bg-color: #d1d1d5,
  active-color: getCssVar(color, bg, 1),
  img-width: getCssVar(width-icon, extra-large),
  img-radius: getCssVar(border-radius, extra-small),
  padding: getCssVar(spacing, base) 0 getCssVar(spacing, base)
  getCssVar(spacing, base),
  group-padding: getCssVar(spacing, tight) getCssVar(spacing, base),
  group-font: getCssVar(font-size, regular),
  icon-color: #a0a5aa,
  group-caption-color: #9a9b9f,
  load-more-font-size: getCssVar(font-size, small),
  font-size: getCssVar(font-size, header-5),
  right-icon-margin-right: rem(21px),
  simplelist-height: 250px,
  select-item-padding-bottom: getCssVar(spacing, tight),
  select-item-margin: getCssVar(spacing, tight) 0 0 getCssVar(spacing, tight),
  select-item-check-padding: getCssVar(spacing, extra-tight),
  select-item-gap: getCssVar(spacing, tight),
  pagination-height: var(--van-pagination-height),
);

$panel:(
  scroll: hidden,
);

@include b(control-mobmdctrl) {
  @include set-component-css-var(control-mobmdctrl, $control-mobmdctrl);
  .#{bem(panel-container)}{
    @include set-component-css-var(panel, $panel);
  }

  --van-cell-font-size: #{getCssVar(control-mobmdctrl, font-size)};

  height: 100%;
  overflow: getCssVar(control, overflow);

  @include e(content) {
    width: 100%;
    height: 99%;

    .van-cell {
      padding: getCssVar(control-mobmdctrl, padding);
    }
    @include when(show-underLine) {
      .#{bem(control-mobmdctrl-item)}
      + .#{bem(control-mobmdctrl-item)}::before {
        position: relative;
        top: -0.875rem;
        left: 1rem;
        display: block;
        width: calc(100% - 2rem);
        height: rem(1px);
        content: '';
        background-color: getCssVar(color, border);
      }

      .van-swipe-cell + .van-swipe-cell {
        .van-swipe-cell__wrapper::before {
          position: relative;
          top: rem(1px);
          left: 1rem;
          display: block;
          width: calc(100% - 2rem);
          height: rem(1px);
          content: '';
          background-color: getCssVar(color, border);
        }
      }
    }
  }

  @include e(setting) {
    position: absolute;
    right: getCssVar('spacing', 'tight');
    z-index: 1;
  }

  @include when(enable-page) {
    .#{bem(control-mobmdctrl, content)} {
      height: calc(100% - getCssVar(control-mobmdctrl, pagination-height));
    }
  }

  .van-cell__right-icon {
    margin-right: getCssVar(control-mobmdctrl, right-icon-margin-right);
    color: getCssVar(control-mobmdctrl, icon-color);
  }

  .van-cell--clickable:active {
    color: inherit;
  }

  .van-cell::after {
    width: 100%;
  }
}

@include b(control-mobmdctrl-item) {
  @include set-component-css-var(control-mobmdctrl, $control-mobmdctrl);
  background-color: getCssVar(control-mobmdctrl, item-bg-color);
  color: getCssVar(control-mobmdctrl, item-font-color);
  &:hover {
    background-color: getCssVar(control-mobmdctrl,
      item-hover-color
    );
  }
  @include when(active) {
    background-color: getCssVar(control-mobmdctrl,
      item-active-color
    );
  }

  @include m(right) {
    margin-right: getCssVar(control-mobmdctrl, right-icon-margin-right);
  }

  padding: 0.875rem 0;

  &.#{bem(control-panel)} {
    height: auto;
  }
}

@include b(control-mobmdctrl-image) {
  @include set-component-css-var(control-mobmdctrl, $control-mobmdctrl);

  width: getCssVar(control-mobmdctrl, img-width);
  margin-right: getCssVar(control-mobmdctrl, padding);
  border-radius: getCssVar(control-mobmdctrl, img-radius);
}

@include b(control-mobmdctrl-group-caption) {
  @include set-component-css-var(control-mobmdctrl, $control-mobmdctrl);

  padding: getCssVar(control-mobmdctrl, group-padding);
  font-size: getCssVar(control-mobmdctrl, group-font);
  color: getCssVar(control-mobmdctrl, group-caption-color);
}

@include b(control-mobmdctrl-load-more) {
  display: flex;
  justify-content: center;
  padding: getCssVar(spacing, tight);
  font-size: getCssVar(control-mobmdctrl, load-more-font-size);
  color: getCssVar(color, text, 2);

  span {
    padding: getCssVar(spacing, extra, tight) getCssVar(spacing, base);
    cursor: pointer;
    border: 1px solid getCssVar(color, border);
    border-radius: getCssVar(border, radius, full);
  }
}

@include b(control-mobmdctrl-select-item) {
  display: flex;
  gap: getCssVar(control-mobmdctrl, select-item-gap);
  padding-bottom: getCssVar(control-mobmdctrl, select-item-padding-bottom);
  margin: getCssVar(control-mobmdctrl, select-item-margin);
  border-bottom: 1px solid getCssVar(color, border);

  > .van-checkbox {
    padding: getCssVar(control-mobmdctrl, select-item-check-padding);
  }
}
@include b('control-mobmdctrl-slider-item'){
  .van-swipe-cell__right{
    >.van-button{
      height: 100%;
    }
  }
  .van-swipe-cell__left{
    >.van-button{
      height: 100%;
    }
  }
}
